<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>简历</title>
    <script type="text/javascript" th:src="@{/jquery.min.js}"></script>
    <script>
        $(document).ready(function () {
            list();
            $("#add").click(function () {
                window.location.href = "/resume/add"
            })

            function list() {
                // 获取
                $.ajax({
                    url: '/resume/list',
                    type: 'GET',
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: function (data) {
                        $("#list tbody").empty();
                        for (let i = 0; i < data.length; i++) {
                            let item = data[i]
                            let $tr = $("<tr></tr>");
                            $tr.append('<td>' + item.id + '</td>');
                            $tr.append('<td>' + item.name + '</td>');
                            $tr.append('<td>' + item.phone + '</td>');
                            $tr.append('<td>' + item.address + '</td>');
                            var $btn = $('<td><button class="edit" type="button"">修改</button><button class="delete" type="button">删除</button></td>');
                            $btn.find(".edit").data({"id": item.id}).click(function () {
                                window.location.href = "/resume/edit/" + $(this).data("id")
                            });
                            $btn.find(".delete").data({"id": item.id}).click(function () {
                                deleteItem($(this).data("id"))
                            });
                            $tr.append($btn);
                            $("#list tbody").append($tr);
                        }
                    }
                })
            };

            function deleteItem(id) {
                $.ajax({
                    url: '/resume/' + id,
                    type: 'DELETE',
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: function (data) {
                        list();
                    }
                })
            }
        })
    </script>
</head>
<body>
端口号:<span th:text="${#httpServletRequest.getLocalPort()}"></span>
当前用户:<span th:text="${session.user}"></span>
<br>
简历列表
<input type="button" id="add" value="新增">
<table id="list" border="1">
    <thead>
    <tr>
        <th>id</th>
        <th>名称</th>
        <th>电话</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
</body>
</html>
